<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TabView Example - Dynamically Loading Content</title>

<link rel="stylesheet" type="text/css" href="css/example.css">

<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabview.css">
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/connection/connection.js"></script>
<script type="text/javascript" src="../../build/element/element-beta.js"></script>
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>

<style type="text/css">
#demo {
    width:30em; /* arbitrary width */
}

#demo .yui-content {
    padding:1em;
}

#demo .loading {
    background-image:url(img/loading.gif);
    background-position:center center;
    background-repeat:no-repeat;
}

#demo .loading * {
    display:none;
}
</style>

<script type="text/javascript">
YAHOO.example.init = function() {
    var tabView = new YAHOO.widget.TabView({id: 'demo'});
    
    tabView.addTab(new YAHOO.widget.Tab({
        label: 'lorem',
        dataSrc: 'php/nonsense.php?type=list',
        active: true
    }));
    
    tabView.addTab(new YAHOO.widget.Tab({
        label: 'lorem',
        dataSrc: 'php/nonsense.php?type=para',
        cacheData: true /* only load once */
        
    }));
    
    YAHOO.util.Event.onContentReady('doc', function() {
        tabView.appendTo('doc');
    });

};

YAHOO.example.init();
</script>

</head>
<body>
<div id="doc">
    <h1>TabView Example - Dynamically Loading Content</h1>
    <p>This example demonstrates how to load tab content dynamically.</p>

</div>
</body>
</html>
